<script setup lang="ts">
	import HomeTopLog from "@/components/Log/HomeTopLog.vue"
	import LogHome from "@/components/Log/LogHome.vue"
	import useLogStore from '@/stores/log'

	const Home = useLogStore().home

	Home.addLogs()

	onReachBottom(() => {
		if (!Home.loading) Home.addLogs()
	})
</script>

<template>
	<view class="home">
		<NavBar>
			多元记
		</NavBar>

		<HomeTopLog />
		<LogHome v-for="log in Home.list" :log="log" :key="log.id" />

		<u-loadmore :status="Home.loading ? 'loading' : (Home.noMore ? 'nomore' : 'loadmore')" />
	</view>
</template>

<style scoped lang="scss">
	.home {
		& {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: $gap;
		}
	}
</style>